<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="static/vant/index.css">
    <link rel="stylesheet" href="static/element/index.css">
    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>Title</title>

    <style>
        .fail .layui-layer-content {
            background-color: brown;
            color: #eee;
            width: 400px;
            height: 30px;
            text-align: center;
        }

        .succeed .layui-layer-content {
            background-color: #0061A8;
            color: #eee;
            width: 400px;
            height: 30px;
            text-align: center;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        input[type='number'] {
            -moz-appearance: textfield;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 138px;
            height: 180px;
            line-height: 180px;
            text-align: center;
        }

        .avatar {
            width: 138px;
            height: 180px;
            display: block;
        }

    </style>
</head>
<body>
<article class="page-container" id="app">

    <table style="table-layout:fixed; width: 100%; word-break:break-all;" class="table table-border table-bordered table-bg table-hover table-sort table-responsive" id="tablelist">
        <tbody id="datalist">
        <tr class="text-c">
            <td style="width: 100px; font-weight: bolder; font-size: 0.8rem; background: #eee;">人员工号</td>
            <td style="font-size: 0.8rem;">
                <input type="text" class="input-text" style="border:0;" v-model="gh" autocomplete="off" readonly="readonly">
            </td>
            <td style="width: 100px; font-weight: bolder; font-size: 0.8rem; background: #eee;">人员姓名</td>
            <td style="font-size: 0.8rem;">
                <input type="text" class="input-text" style="border:0;" v-model="ryxm" autocomplete="off" readonly="readonly">
            </td>
        </tr>

        <tr class="text-c">
            <td style="width: 100px; font-weight: bolder; font-size: 20px; background: #eee;">原卡余额</td>
            <td style="font-size: 0.8rem;">
                <div style="text-align: left">
                    <el-input @input="xfje=xfje.replace(/\D+/g,'')" v-model="xyye" disabled style="font-size: 20px"></el-input>
                </div>
            </td>

            <td style="width: 100px; font-weight: bolder; font-size: 20px; background: #eee;">789消费总额</td>
            <td style="font-size: 0.8rem;">
                <div style="text-align: left">
                    <el-input @input="xfje=xfje.replace(/\D+/g,'')" v-model="xfje" disabled style="font-size: 20px"></el-input>
                </div>
            </td>

        </tr>

        <tr class="text-c">
            <td style="width: 100px; font-weight: bolder; font-size: 20px; background: #eee;  color:brown">总计可退</td>
            <td style="font-size: 0.8rem;">
                <div style="text-align: left">
                    <el-input @input="xfje=xfje.replace(/\D+/g,'')" v-model="sjrz" disabled style="font-size: 20px; color:brown"></el-input>
                </div>
            </td>
            <td style="width: 100px; font-weight: bolder; font-size: 0.8rem; background: #eee;"></td>
            <td style="font-size: 0.8rem;">
                <input type="text" class="input-text" style="border:0; width: 0; background-color: rgba(0,0,0,0)">
            </td>
        </tr>

        </tbody>
    </table>
    <van-row style="margin-top: 25px;">
        <van-col span="6"></van-col>
        <van-col span="6"></van-col>
        <van-col span="6">
            <div style="text-align: right">
                <van-button type="primary" @click="fDo()" style="width: 80%">{{btnText}}</van-button>
            </div>
        </van-col>
        <van-col span="6">
            <div style="text-align: right">
                <van-button type="info" @click="fExit()" style="width: 80%">返回</van-button>
            </div>
        </van-col>
    </van-row>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="static/axios.min.js"></script>
<script type="text/javascript" src="./static/vue"></script>
<script src="static/vant/vant.min.js"></script>
<script src="static/element/index.js"></script>
<script type="text/javascript">

    let vm = new Vue({
        el: '#app',
        data: {
            flag: false,
            ryzh: '',
            ryxm: '',
            xfje: '',
            options: [],
            tableRylb: [],
            tableXflb: [],
            bmvalue: '',
            rylb: '',
            gh: '',
            xflb: '',
            sfzh: '',
            dhhm: '',
            hysex: '',
            ismen: '',
            base64: '',
            btnText: '',
            xyye: '',
            glf: '',
            sjrz: '',
            rzhye: '',
            tip: ''
        },
        methods: {
            fDo() {
                let self = this
                let ls_opid = "${sessionOpid}";
                layer.confirm("确定是否进行该卡退款？", {
                    btn: ["确定", "取消"] //按钮
                }, function () {
                    if (!this.lock) {
                        this.lock = true
                        this.fullscreenLoading = true
                        let params = new URLSearchParams();
                        params.append('CMD', "BZ");
                        params.append('VALUE01', ls_opid)
                        params.append('VALUE02', self.ryzh)
                        params.append('VALUE03', self.sjrz)
                        axios.post('/f_wscl/com2', params)
                            .then(function (res) {
                                let {db1} = res.data
                                if (db1[0].VALUE01 === 'ZZ01') {
                                    layer.msg('<span style="font-size:26px; line-height: 30px">' + db1[0].VALUE02 + '</span>', {time: 2000, skin: 'fail'});
                                } else if (db1[0].VALUE01 === 'ZZ00') {
                                    layer.msg("<span style='font-size:26px; line-height: 30px'>余额操作完毕!</span>", {time: 2000, skin: 'succeed'}, function () {
                                        let index = parent.layer.getFrameIndex(window.name);
                                        parent.fGetinfoEmp()
                                        parent.layer.close(index);
                                    });
                                }
                            })
                            .catch(function (error) {
                                layer.msg('<span style="font-size:26px; line-height: 30px">网络异常错误!</span>', {time: 1500, skin: 'fail'});
                            })
                            .finally(function () {
                                self.lock = false
                                self.fullscreenLoading = false
                            });
                    }
                    //--如下两个备注留着，用来确定是否关闭弹出的界面而不关闭显示流水的列表界面
                    // layer.closeAll('dialog');
                    // layer.close(index);
                }, function () {
                });
            },

            async fInit(o) {
                let empobj = o.tableEmp
                this.ryzh = empobj.VALUE01.toString()
                this.ryxm = empobj.VALUE03.toString()
                this.gh = empobj.VALUE02.toString()
                this.xyye = empobj.VALUE07.toString()
                this.xfje = empobj.VALUE08.toString()
                this.sjrz = empobj.VALUE09.toString()
                this.btnText = o.btnText
            },

            fExit() {
                let index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            }
        },

        created() {
            window.fInit = this.fInit
        }
    })

    $(document).ajaxComplete(function (event, xhr, settings) {
        //从http头信息取出 在filter定义的sessionstatus，判断是否是 timeout
        if (xhr.getResponseHeader("sessionstatus") === "timeout") {
            //从http头信息取出登录的url ＝ loginPath
            if (xhr.getResponseHeader("loginPath")) {
                window.location.replace(xhr.getResponseHeader("loginPath"));
            }
        }
    });
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
